@charset "utf-8";
@import "_reset";
.mobile{
    .mask{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.2);
        z-index: 5;
    }
    .all{
        overflow: hidden;
        width: 90%;
        height: 100%;
        margin: 0 auto;
        background: url(../img/Mc_bg_game.jpg)no-repeat;
        background-size: 107%;
        background-position-x: -20px;
        position: relative;
        .top{
            margin-top: 50px;
            text-align: center;
            position: relative;
            z-index: 1;
            
            img:nth-child(1){
                width: 60px;
                float: left;
                margin-left: 20px;
            }
            img:nth-child(3){
                width: 60px;
                float: right;
                margin-right: 20px;
            }
             img:nth-child(2){
                width: 115px;
                margin-top: -20px;
             }
             p{
                 font-size: 30px;
                 font-weight: bold;
                 color: gold;
                 }
                 p:nth-child(4){
                     position: absolute;
                     top: 25px;
                     left: 25px;
                 }
                  p:nth-child(5){
                     position: absolute;
                     top: 25px;
                    right: 25px;
                 }
        }
//      .ball,.boy,.girl,.boom{
//          display: none;
//      }
        .ball{
            width: 175px;
            height: 172px;
            background: url(../img/ballbg.png)no-repeat;
            animation-name: ball;
            animation-duration: 1s;
            animation-timing-function:steps(1,start) ;
            animation-iteration-count:infinite ;
            transform: scale(0.7);
            z-index: 0;
            position: absolute;
            top:-100px;
           
    
        }
        .boom{
            width: 145px;
            height: 221px;
            background: url(../img/boomBg.png)no-repeat;
            animation-name: boom;
            animation-duration: 1s;
            animation-timing-function:steps(1,start) ;
            animation-iteration-count:infinite ;
            transform: scale(0.7);
            z-index: 0;
            position: absolute;
            top:-100px;
    
        }
         .girl{
            width: 175px;
            height: 172px;
            background: url(../img/girlBg.png)no-repeat;
            animation-name: girl;
            animation-duration: 1s;
            animation-timing-function:steps(1,start) ;
            animation-iteration-count:infinite ;
            transform: scale(0.7);
            z-index: 0;
            position: absolute;
            top:-100px;
    
        }
         .boy{
            width: 175px;
            height: 172px;
            background: url(../img/boyBg.png)no-repeat;
            animation-name: boy;
            animation-duration: 1s;
            animation-timing-function:steps(1,start) ;
            animation-iteration-count:infinite ;
            transform: scale(0.7);
            z-index: 0;
            position: absolute;
            top:-100px;
    
        }
//      .new{
//          position: absolute;
//          top: 0;
//          left: 0;
//          width: 100%;
//          background: gray;
//          height: 172px;
//      }
        .player{
            width: 140px;
            height: 260px;
            background: url(../img/playerBg.png)no-repeat;
            animation-name: player;
            animation-duration: 0.8s;
            animation-timing-function:steps(1,start) ;
            animation-iteration-count:infinite ;
            transform: scale(0.7);
            position: absolute;
            bottom: 0;
            z-index: 4;
        }
        .overPage{
            background: url(../img/juan1.png)no-repeat;
            width: 100%;
            height: 90%;
            opacity: 0;
            margin-top: -25px;
            text-align: center;
            position: absolute;
            z-index: 2;
            img:not(:nth-child(1)){
                width: 167px;
                margin-bottom: 5px;
            }
            img:nth-child(1){
                width: 200px;
                margin-top: 105px;
                margin-bottom: 0px;
            }
            
            background-size: 100%;
            .grade{
                font-size: 40px;
                color: gold;
                text-shadow: 4px 4px 7px #000;
            } 
            #rank_txt{
                width: 150px;
                margin-top: 62px;
            }
            #rank_again{
                position: absolute;
                bottom: 130px;
                left: 88px;
                width: 155px;
            }
             
        }
        .overPage_share{
            display: none;
        }
        
    }
     .btnBgm{
        width: 40px;
        height: 40px;
        position: fixed;
        right: 30px;
        top: 10px;
        z-index: 6;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
@keyframes ball{
            0%{background-position-x: 0px;}
            50%{background-position-x:-175px;}
            100%{background-position-x: 0px;}
            
        }
@keyframes boom{
            0%{background-position-x: 0px;}
            50%{background-position-x:-145px;}
            100%{background-position-x: 0px;}
            
        }
@keyframes boy{
            0%{background-position-x: 0px;}
            50%{background-position-x:-175px;}
            100%{background-position-x: 0px;}
    
        }
@keyframes girl{
            0%{background-position-x: 0px;}
            50%{background-position-x:-175px;}
            100%{background-position-x: 0px;}
            
        }
@keyframes player{
            0%{background-position-x: 0px;}
            50%{background-position-x:-140px;}
            100%{background-position-x: 0px;}
            
        }